<template>
  <div>
    <el-table 
    :data="tableData" 
    style="width: 100%" 
    border height="500" 
    @row-click="handleRowClick" 
    highlight-current-row
    :current-row="selectedRow">
      <el-table-column prop="id" label="id号" width="180"></el-table-column>
      <el-table-column prop="title" label="书名" width="180"></el-table-column>
      <el-table-column prop="author" label="作者" width="180"></el-table-column>
      <el-table-column prop="copies" label="库存数量"></el-table-column>
    </el-table>

    <div style="margin-top: 20px;">
      <el-button @click="addBook">新增书籍</el-button>
      <el-button @click="deleteSelected">删除书籍</el-button>
    </div>

    <el-dialog title="新增书籍" :visible.sync="dialogVisible">
      <el-form :model="newBook">
        <el-form-item label="书名">
          <el-input v-model="newBook.title"></el-input>
        </el-form-item>
        <el-form-item label="作者">
          <el-input v-model="newBook.author"></el-input>
        </el-form-item>
        <el-form-item label="库存数量">
          <el-input-number v-model="newBook.copies" :min="1"></el-input-number>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmAdd">确认</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, title: "Python编程", author: "John Doe", copies: 4 },
        { id: 2, title: "历史的秘密", author: "Jane Smith", copies: 3 },
        { id: 3, title: "宇宙探索", author: "Emily Brown", copies: 2 },
        { id: 4, title: "健康生活", author: "Mike Johnson", copies: 5 },
        { id: 5, title: "数学之美", author: "Sarah Lee", copies: 4 },
        { id: 6, title: "艺术欣赏", author: "David White", copies: 3 },
        { id: 7, title: "编程入门", author: "Alice Green", copies: 2 },
        { id: 8, title: "科幻世界", author: "Frank Black", copies: 5 },
        { id: 9, title: "自然奇观", author: "Grace Blue", copies: 4 },
        { id: 10, title: "音乐之声", author: "Tom Red", copies: 3 }
      ],
      dialogVisible: false,
      newBook: {
        title: '',
        author: '',
        copies: 1
      },
      selectedRow: null
    };
  },
  methods: {
    handleRowClick(row) {
      this.selectedRow = row;
      this.$message.info('已选择书籍：' + row.title);
    },
    addBook() {
      this.newBook = { title: '', author: '', copies: 1 };
      this.dialogVisible = true;
    },
    confirmAdd() {
      if (!this.newBook.title || !this.newBook.author) {
        this.$message.error('请填写完整的书籍信息');
        return;
      }

      const newId = Math.max(...this.tableData.map(b => b.id)) + 1;
      this.tableData.push({
        id: newId,
        ...this.newBook
      });

      this.dialogVisible = false;
    },
    deleteSelected() {
      this.$confirm('确定要删除选中的书籍吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (this.selectedRow) {
          this.tableData = this.tableData.filter(b => b.id !== this.selectedRow.id);
          this.reindexIds();
          this.selectedRow = null;
        } else {
          this.$message.warning('请先选择一本书籍');
        }
      }).catch(() => {});
    },
    reindexIds() {
      this.tableData.forEach((book, index) => {
        book.id = index + 1;
      });
    }
  }
};
</script>